import Taro from '@tarojs/taro';
import { View, Text, Image, Input } from '@tarojs/components';
import { AtTextarea } from 'taro-ui'
import './index.scss';
import http from '@/utils/http';
import utils from '@/utils/util';
import { get as getGlobalData } from '@/global'
import DrugItem from '@/components/drugItem/index';
import MyModal from '@/components/myModal/index';

let app = Taro.getApp();
class useDrug extends Taro.Component {
    constructor(props) {
        super(props);
        this.state = {
            note: '',
            isOpened: false,
            quantity: 0,
            isInput:false,
            nums: 0,
            useDrugobj: {},
            picturesArr: []
        }
    }

    componentWillMount() {
        let useDrugobj = this.$router.params;
        Taro.setNavigationBarTitle({
            title: (useDrugobj.isJxq === '将过期' || useDrugobj.isJxq === '已过期') ? '回收药品':'使用药品'
        })
        let quantity = useDrugobj.quantity - useDrugobj.usernum
        this.setState({
            useDrugobj,
            quantity,
            nums: quantity
        })
    }
    handleChange(e) {
        this.setState({
            note: e.detail.value
        })
    }
    uploadImg() {
        let { picturesArr } = this.state;
        utils.uploadImg().then((res) => {
            picturesArr.push(res);
            this.setState({
                picturesArr
            })
        })
    }
    useDrugs() {
        let userInfo = getGlobalData('userInfo') || utils.getUserInfo();
        let { useDrugobj, picturesArr, note, nums} = this.state;
        let Apiurl = 'useDrugs';
        let rdata = {
            pics: picturesArr.join('|'),
            loginid: userInfo.loginid,
            usernum: nums,
            medicalkitid: useDrugobj.rmedicalkits,
            drugid: useDrugobj.drugid,
            yxq: useDrugobj.validitydate,
            mark: note
        }
        if ((useDrugobj.isJxq === '将过期' || useDrugobj.isJxq === '已过期')) {
            Apiurl = 'sendMedicalkitRequest';
            rdata = {
                pics: picturesArr.join('|'),
                loginid: userInfo.loginid,
                medicalkitid: useDrugobj.rmedicalkits,
                mark: note
            }
        }
        http.get(Apiurl, rdata).then((res)=>{
            utils.showtoast('操作成功',undefined,undefined,true);
            setTimeout(() => {
                Taro.navigateBack({
                    delta: 2
                });
            })
        }).catch((err) => {

        })
    }
    calculate(name) {
        let { nums, useDrugobj } = this.state;
        if (name === 'add') {
            nums < (useDrugobj.quantity - useDrugobj.usernum) && this.setState({ nums: nums + 1 })
        }else {
            nums > 1 && this.setState({ nums: nums - 1 })
        }
    }
    cancel(e) {
        this.refs.Modal.isHide();
        this.setState({ isOpened: false })
    }
    previewImage(picturesArr,item) {
        app.previewImage(picturesArr, item);
    }
    Inputval(e){
        let { value } = e.detail;
        let { quantity } = this.state;
        value = isNaN(value) ? 1 : Number(value);
        if (value > quantity || value <= 0) {
            value = value > quantity ? quantity : 1
        }
        console.log(value)
        this.setState({
            nums: Number(value)
        })
        return value 
    }
    render() {
        const { note, picturesArr, useDrugobj, isOpened, quantity, nums, isInput} = this.state;
        let maxLength = (quantity+'').length;
        return (
            <View className='pl-2-5 pr-2-5 pt-2-5 use-drug'>
                <DrugItem isDetails drugItem={useDrugobj} renderSolt={
                    <View className='mt-6-5'>
                        <Text className='ft_w600'>{(useDrugobj.isJxq === '将过期' || useDrugobj.isJxq === '已过期') ? '回收信息' : '使用信息'}：</Text>
                        <View className='mt-3-5'>
                            {!isOpened && <AtTextarea
                              value={note}
                              placeholderClass='ft24 ft_B9C'
                              onChange={this.handleChange.bind(this)}
                              maxLength={200}
                              placeholder={(useDrugobj.isJxq === '将过期' || useDrugobj.isJxq === '已过期') ? '请填写回收备注信息' : '请填写病床号，患者姓名，如:3病床，李三'}
                            />}
                        </View>
                        {
                            useDrugobj.isJxq === '未过期' && <View className='mt-4 flex flex-r'>
                                <View className='ft28 fc_53C'>数量：</View>
                                <View className='number-btn1 bg_1FF' onClick={() => { this.calculate() }}>-</View>
                                <View className='number flex flex-item-center' onClick={() => { this.setState({ isInput: true }) }}>
                                    {isInput ? <Input focus onBlur={() => { this.setState({ isInput: false }) }}  className='text-c' maxLength={maxLength} onInput={(e) => { this.Inputval(e) }} type='number' value={nums}></Input> : nums}
                                </View>
                                <View className='number-btn2 bg_1FF' onClick={() => { this.calculate('add') }}>+</View>
                            </View>
                        }
                        <View className='mt-4'>附件：</View>
                        <View className='pictures-arr flex flex-r mt-3-5' >
                            {
                                picturesArr.map((item) => {
                                    return (
                                        <View className='pictures-arr-item flex bdr_10' key={item}>
                                            <View className='ov-h flex-1 bdr_10' onClick={() => { this.previewImage(picturesArr, item)}}>
                                                <Image src={item} mode='center' className='pictures-box'></Image>
                                            </View>
                                        </View>
                                    )
                                })
                            }
                            {
                                picturesArr.length < 3 ?
                                    <View className='pictures-arr-item flex flex-item-center flex-c bdr_10' onClick={() => { this.uploadImg() }} >
                                        <Image className='camera' src={require('../../assets/imgs/drug/plus.png')}></Image>
                                        <Text className='mt-2 ft24 fc_999'>添加附件</Text>
                                    </View>
                                    : null
                            }

                        </View>
                        <View onClick={() => { this.refs.Modal.isShow(), this.setState({ isOpened: true }) }} className='default-btn ft32 fc_FFF text-c mt-11 mb-6' >{(useDrugobj.isJxq === '将过期' || useDrugobj.isJxq === '已过期')? '回收' : '使用'}</View>
                    </View>
                }
                ></DrugItem>
                <MyModal ref='Modal'
                  confirm={(event) => {this.useDrugs(event)}}
                  cancel={(event) => {this.cancel(event)}}
                  renderSolt={
                        <View className='pb-5 ft26 fc_65C'>
                          <View className='mb-2'>{(useDrugobj.isJxq === '将过期' || useDrugobj.isJxq === '已过期') ? '回收药品' : '使用药品'}：{useDrugobj.drugname}</View>
                          {useDrugobj.isJxq === '未过期'&& <View className='mb-2'>数量：{nums}支</View>}
                          <View className='mb-2 word-all'>备注：{note}</View>
                          <View >附件：{picturesArr.length}</View>
                        </View>
                    }
                ></MyModal>
            </View>
        );
    }
}

export default useDrug;